<template>
  <div>
    <!-- <li class="todo editng">
      <div class="view">
        <input class="toggle" type="checkbox" />
        <label>{{ todo.text }}</label>
        <button class="destroy"></button>
      </div>
      <input class="edit" type="text" />
    </li> -->
    <!-- <section class="main" v-cloak>
      <input class="toggle-all" type="checkbox" />
      <ul class="todo-list">
          <li class="todo"></li>
      </ul>
    </section> -->
  </div>
</template>

<script>
export default {
  props: ["todo"],
  data() {
    return {};
  },
  mounted() {
    console.log(this.todo);
  },
};
</script>

<style scoped>
.edit {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  font-size: 20px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  outline: none;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 999;
}
</style>
